<template>
  <div class="addinstall">
    <!-- 添加或修改公告对话框 -->
    <el-dialog :title="title" :visible.sync="$parent.open" width="60%" append-to-body>
      <div class="center_dialog">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-divider>基础信息</el-divider>
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="设备编号" prop="equipmentNum">
                <el-input v-model="form.equipmentNum" placeholder="请输入设备编号" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="资产编号" prop="assetNum">
                <el-input v-model="form.assetNum" placeholder="请输入资产编号" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="供应商" prop="supplierId">
                <el-select v-model="form.supplierId" filterable @change="changeSupplier(form.supplierId)"
                  placeholder="请选择供应商" style="width:100%">
                  <el-option v-for="(dict, index) in supplierdict" :key="index" :label="dict.supplierName"
                    :value="dict.supplierId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="设备名称" prop="equipmentBaseId">
                <el-select v-model="form.equipmentBaseId" filterable @change="changeSelect(1)" placeholder="请选择类别"
                  style="width:100%">
                  <el-option v-for="dict in basedata" :key="dict.index" :label="dict.equipmentName"
                    :value="dict.equipmentBaseId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <template v-if="form.equipmentBaseId">
              <el-col :span="11">
                <el-form-item label="品牌" prop="brand">
                  <el-input v-model="rowObject.brand" placeholder="请输入品牌" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="规格型号" prop="model">
                  <el-input v-model="rowObject.model" placeholder="请输入规格型号" :disabled="true" />
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="单位" prop="unit">
                  <el-select v-model="rowObject.unit" placeholder="请选择单位" :disabled="true" style="width:100%">
                    <el-option v-for="dict in dict" :key="dict.value" :label="dict.dictLabel" :value="dict.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="类别" prop="typeId">
                  <el-select v-model="rowObject.typeId" placeholder="请选择类别" :disabled="true" style="width:100%">
                    <el-option v-for="dict in typedict" :key="dict.index" :label="dict.typeName" :value="dict.typeId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="计量设备" prop="meterageFlag">
                  <el-select v-model="rowObject.meterageFlag" placeholder="请选择计量设备" :disabled="true" style="width:100%">
                    <el-option v-for="(dict, index) in ['是', '否']" :key="index" :label="dict" :value="index + ''">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item v-if="rowObject.meterageFlag === '0'" label="计量编号" prop="meterageNum">
                  <el-input v-model="rowObject.meterageNum" placeholder="请输入计量编号" :disabled="true" />
                </el-form-item>
              </el-col>
            </template>
          </el-row>
          <el-row :gutter="20" v-if="form.equipmentBaseId">
            <el-col :span="11">
              <el-form-item label="设备图片" prop="image">
                <template v-if="rowObject.image">
                  <ImagePreview :src="rowObject.image" :width="100" :height="100"></ImagePreview>
                </template>
                <!-- <el-image :src="rowObject.image" style="width:100px;height:100px"></el-image> -->
                <!-- <Upload :imgUrl="form.image" @clearimgUrl="()=>form.image=''" @handleSuccess="handleSuccess"></Upload> -->
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="设备附件" prop="file">
                <el-link :disabled="!rowObject.file" type="primary" icon="el-icon-document" :href="rowObject.file"
                  target="_blank">附件资料</el-link>
                <!-- <el-upload
                :action="action_url"
                list-type="text"
                accept=".pdf,.doc,.xlsx,.jpg,'.png'"
                :headers="header_url"
                :show-file-list="true"
                :on-success="handlePictureCardflie"
                :before-upload="beforeAvatarUploadflie"
                :on-remove="handleremoveflie"
                :limit="1"
              >
                <el-button size="medium" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  上传附件支持xls,xlsx ,.docx , .doc,.pdf,.jpg,.png格式,大小不超过50M。
                </div>
              </el-upload> -->
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider>其他信息</el-divider>
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="采购日期" prop="purchaseTime">
                <el-date-picker v-model="form.purchaseTime" type="date" value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions" style="width:100%" placeholder="请选择采购日期" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="采购金额" prop="purchasePrice">
                <el-input-number v-model="form.purchasePrice" style="width:100%" :min="0" placeholder="请输入采购金额" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="验收日期" prop="acceptanceTime">
                <el-date-picker v-model="form.acceptanceTime" value-format="yyyy-MM-dd" :picker-options="pickerOptions"
                  type="date" style="width:100%" placeholder="请选择验收日期" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="保质期至" prop="shelfLife">
                <el-date-picker v-model="form.shelfLife" value-format="yyyy-MM-dd"
                  :picker-options="forwardPickerOptions" type="date" style="width:100%" placeholder="请选择保质期至" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="预计报废日期" prop="estimatedScrapTime">
                <el-date-picker v-model="form.estimatedScrapTime" value-format="yyyy-MM-dd" type="date"
                  style="width:100%" placeholder="请选择预计报废日期" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="净值(元)" prop="netWorth">
                <el-input-number v-model="form.netWorth" style="width:100%" :min="0" :max="form.purchasePrice"
                  placeholder="请输入净值" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="关联验收单" prop="acceptanceBaseId">
                <el-select v-model="form.acceptanceBaseId" placeholder="请选择关联验收单" style="width:100%">
                  <el-option v-for="(dict, index) in acceptanceList" :key="index" :label="dict.acceptanceNum"
                    :value="dict.acceptanceBaseId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider>归属信息</el-divider>
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="所属部门" prop="deptId">
                <el-select v-model="form.deptId" placeholder="请选择所属部门" :disabled="title === '修改设备台账'" style="width:100%"
                  @change="SelectInfoChange(form.deptId, 1)">
                  <el-option v-for="(dict, index) in Systemlist" :key="index" :label="dict.deptName"
                    :value="dict.deptId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="负责人" prop="headId">
                <el-select v-model="form.headId" placeholder="请选择负责人" :disabled="true" style="width:100%">
                  <el-option v-for="(dict, index) in userList" :key="index" :label="dict.userName" :value="dict.userId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="放置位置" prop="placeId">
                <el-select v-model="form.placeId" filterable placeholder="请选择放置位置" :disabled="title === '修改设备台账'"
                  style="width:100%">
                  <el-option v-for="(dict, index) in placeListPlace" :key="index" :label="dict.placeName"
                    :value="dict.placeId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider>关联信息</el-divider>
          <el-row :gutter="20">
            <el-col :span="11">
              <el-form-item label="购置类型" prop="purchaseType">
                <el-select v-model="form.purchaseType" placeholder="请选择购置类型" :disabled="title === '修改设备台账'"
                  style="width:100%">
                  <el-option v-for="(dict, index) in ['新增设备', '置换设备']" :key="index" :label="dict" :value="index + ''">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11" v-if="form.purchaseType === '1'">
              <el-form-item label="置换旧设备" prop="replaceEquipmentAccountId">
                <el-select v-model="form.replaceEquipmentAccountId" filterable :disabled="title === '修改设备台账'"
                  placeholder="请选择置换旧设备" style="width:100%">
                  <el-option v-for="(dict, index) in PartInfoList" :key="index"
                    :label="`${dict.equipmentName} (${dict.equipmentNum})`" :value="dict.equipmentAccountId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <span class="red">备注：购置类型如选择为置换旧设备，则需选择置换下来的旧设备，同时旧设备设置新的放置位置，否则，原区域标签还会存在此旧设备。</span>
            </el-col>
          </el-row>
          <el-divider v-if="form.purchaseType === '1'">旧设备处置信息</el-divider>
          <el-row :gutter="20" v-if="form.purchaseType === '1'">
            <el-col :span="11">
              <el-form-item label="旧设备" prop="replaceEquipmentAccountId" class="hidell">
                <el-select v-model="form.replaceEquipmentAccountId" placeholder="请选择置换旧设备" :disabled="true"
                  style="width:100%">
                  <el-option v-for="(dict, index) in PartInfoList" :key="index"
                    :label="`${dict.equipmentName}(${dict.equipmentNum})`" :value="dict.equipmentAccountId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11" v-if="form.purchaseType === '1'">
              <el-form-item label="放置位置" prop="replaceEquipmentPlaceId">
                <el-select v-model="form.replaceEquipmentPlaceId" :disabled="title === '修改设备台账'" placeholder="请选择位置"
                  style="width:100%">
                  <el-option v-for="(dict, index) in placeList" :key="index" :label="dict.placeName"
                    :value="dict.placeId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider>备注信息</el-divider>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item label="内容">
              <editor v-model="form.noticeContent" :min-height="192"/>
            </el-form-item> -->
        </el-form>
      </div>
      <div align="center" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="() => $parent.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getdatalist, gettypelist, getsupplierlist, getpartInfolist, posttequipmentlist, puttequipmentlist, getbaselist, getacceptancelist, getsystemlist, getuserlist, getplacelist } from '@/api/equipment/equipment.js'
// import Upload from '@/components/upload/index.vue'
export default {
  props: ['title', 'rowObj'],
  components: {
    // Upload
  },
  data () {
    return {
      form: {
        "equipmentNum": "", //设备编号
        "assetNum": "", //资产编号
        "supplierId": null, //供应商ID
        "equipmentBaseId": null, //设备基值ID
        "purchaseTime": null, //采购日期
        "purchasePrice": 0, //采购金额（元）
        "acceptanceTime": null, //验收日期
        "shelfLife": null, //保质期至
        "estimatedScrapTime": null, //预计报废日期
        "netWorth": null, //净值（元）
        "acceptanceBaseId": null, //验收基本信息ID
        "deptId": null, //部门ID
        "headId": null, //负责人ID
        "placeId": null, //放置位置ID
        "purchaseType": null, //购置类型（0新增设备 1置换设备）
        "replaceEquipmentAccountId": null, //替换设备台账ID
        "replaceEquipmentPlaceId": null, //替换设备新放置位置ID
        "remark": null //备注
      },
      rowObject: {},
      dict: [],//单位字典列表
      typedict: [],//类别列表
      supplierdict: [],//供应商列表
      Systemlist: [],//所有部门
      userList: [],//负责人列表
      placeList: [],//位置列表
      placeListPlace: [],//放置位置
      PartInfoList: [],//替换设备列表
      basedata: [],
      acceptanceList: [],//验收基本信息列表
      pickerOptions: {
        // 限制不能选择今天之后的日期
        disabledDate: (time) => {
          return time.getTime() > Date.now()
        }
      },
      forwardPickerOptions: {
        // 限制不能选择今天之前的日期
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e6
        }
      },
      rules: {
        equipmentNum: { required: true, message: '必填', trigger: 'change' },
        supplierId: { required: true, message: '必填', trigger: 'change' },
        equipmentBaseId: { required: true, message: '必填', trigger: 'change' },
        purchaseTime: {
          required: true, message: '必填', trigger: 'change',
        },
        acceptanceTime: { required: true, message: '必填', trigger: 'change' },
        deptId: { required: true, message: '必填', trigger: 'change' },
        headId: { required: true, message: '必填', trigger: 'change' },
        placeId: { required: true, message: '必填', trigger: 'change' },
        purchaseType: { required: true, message: '必填', trigger: 'change' },
        replaceEquipmentAccountId: { required: true, message: '必填', trigger: 'change' },
        replaceEquipmentPlaceId: { required: true, message: '必填', trigger: 'change' },
      }
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    async getlist () {
      let data = await getdatalist({ dictType: 'base_unit' });//单位字典列表
      let params = await gettypelist();//类别列表
      let supplierdata = await getsupplierlist();//供应商列表

      let Systemlist = await getsystemlist();//查询所有部门
      let response = await getplacelist();//位置列表
      let info = await getpartInfolist();//设备部分信息列表
      this.dict = data.data
      this.typedict = params.data
      this.supplierdict = supplierdata.data
      this.Systemlist = Systemlist.data
      this.placeList = response.data
      this.PartInfoList = info.data
      if (this.title === '修改设备台账') {
        console.log(this.rowObj);
        this.form = { ...this.rowObj }
        this.SelectInfoChange(this.form.deptId)
        this.changeSupplier(this.form.supplierId)
      }
    },
    async SelectInfoChange (deptId, is) {
      let params = {
        deptId: deptId
      }
      // let res = await getuserlist(params);//负责人列表
      let place = await getplacelist(params);//放置位置列表
      // this.userList = res.data
      this.placeListPlace = place.data
      this.Systemlist.map(item => {
        if (item.deptId === deptId) {
          this.userList.push({
            userName: item.leader,
            userId: item.leaderUserId
          })
          this.form.headId = item.leaderUserId
        }
      })
      if (is === 1) {
        // this.form.headId = ''
        this.form.placeId = ''
      }
    },
    //提交
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.title === '修改设备台账') {//修改
            let params = {
              ...this.form
            }
            puttequipmentlist(params).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.$parent.open = false
                this.$parent.getList()
              }
            })
          } else {//新增
            let params = {
              ...this.form
            }
            posttequipmentlist(params).then(res => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.$parent.open = false
                this.$parent.handleUpdate()
              }
            })
          }
        }
      });
    },
    async changeSupplier (id) {
      let name = ''
      this.supplierdict.forEach(item => {
        if (item.supplierId === id) {
          name = item.supplierName
        }
      })
      let params = {
        supplierName: name,
        status: '0'
      }
      let basedata = await getbaselist(params);//设备基值列表
      this.basedata = basedata.data
      if (this.title !== '修改设备台账') {
        this.form.equipmentBaseId = ''
      }
      if (this.title === '修改设备台账') {
        this.changeSelect()
      }
    },
    changeSelect (is) {
      let Datalist = this.basedata
      for (let index = 0; index < Datalist.length; index++) {
        const element = Datalist[index];
        if (element.equipmentBaseId === this.form.equipmentBaseId) {
          let params = {
            'params[equipmentBaseId]': element.equipmentBaseId
          }
          getacceptancelist(params).then(res => {//验收基本信息列表
            this.acceptanceList = res && res.data
            if (is === 1) this.form.acceptanceBaseId = ''
          })
          return this.rowObject = element
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  // text-align: center;
  width: 80%;
  margin: 0px auto;
}

// ::v-deep .is-disabled {
//   .el-input__inner {
//     background-color: #fff;
//     color: #000
//   }
// }
</style>
<style>
.hidell .el-input__suffix {
  display: none;
}
</style>